<!doctype html>

<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="styles/kendo.metro.min.css" rel="stylesheet">
        <link href="styles/kendo.common.min.css" rel="stylesheet">
        <link href="myStyles/myCSS.css" rel="stylesheet">
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
	</head>
    
    <title>Index - PHP</title>
    
    <script type="text/x-kendo-template" id="template">
    	<div class="subgrid"></div>
    </script>

	<body>
    <div id="content">
    	<div id="grid"></div>
        <script>
			function detailInit(e)
			{
				var detailRow = e.detailRow;
				
				detailRow.find(".subgrid").kendoGrid(
				{
					dataSource: {
						transport: { read: "data/territories.php"},
						schema: { data: "data"},
						serverFiltering: true,
						filter: { field: "EmpoyeeID", operator: "eq", value: e.data.EmployeeID}
							
					},
					
					columns: [{ title: "Territories", field: "TerritoryDescription"}],
				}
				);	
			}
		
			$(function()
				{
					$("#grid").kendoGrid({
						dataSource:{
							transport:{
								read: "data/employees.php",
								update: {
									url: "data/employees.php",
									type: "POST"	
								}
							},	
							
							error: function(e){
								alert(e.responseText);	
							},
													
							schema: {
								data: "data",
								model: {
									id: "EmployeeID",
									fields: {
										EmployeeID: { editable: false},
										FirstName: { editable: false},
										LastName: { 
											editable: true, 
											validation: {required: true}
										}	
									}
								}								
							}
						},						
						columns: [{field: "EmployeeID", width: 100},{field: "FirstName"}, {field: "LastName"}],
						detailTemplate: kendo.template($("#template").html()),
						detailInit: detailInit,
						editable: true,
						navigable: true,
						toolbar: ["save", "cancel"]
					});	
				}
				
			);
		</script>
        
    </div>    
    </body>
</html>